<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索歌曲</title>
    <link rel="stylesheet" href="css/search.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="font2/iconfont.css">

</head>
<body>
  <div class="search-bar">
      <input type="text" placeholder="🔍 放纵 正在热搜🔥">
      <p>取消</p>
  </div>

  <div class="click">
      <div>
          <span class="icon iconfont">&#xe605;</span>
          <div class="footer-item">歌手</div>
      </div>
      <div>
          <span class="icon iconfont">&#xe8b3;</span>
          <div class="footer-item">排行</div>
      </div>
      <div>
          <span class="icon iconfont" style="margin-left: 3vw">&#xe66b;</span>
          <div class="footer-item">听歌识曲</div>
      </div>
      <div>
          <span class="icon iconfont" style="margin-left: 3vw">&#xe667;</span>
          <div class="footer-item">睡眠专注</div>
      </div>
      <div>
          <span class="icon iconfont" style="margin-left: 3vw">&#xe62f;</span>
          <div class="footer-item">免费模式</div>
      </div>
  </div>
  <h3>搜索历史</h3>
  <div class="tags">
      <span>冬眠</span>
      <span>ljz329</span>
      <span>神龙</span>
      <span>天赐的声音</span>
      <span>原唱</span>
  </div>
  <h3>搜索发现</h3>
  <div class="tags">
      <span>暮色回想</span>
      <span>如果可以</span>
      <span>红花会</span>
      <span>pg one</span>
  </div>
  <div class="box">
      <div class="box1">
          <h3 style="margin-top: 1vw;margin-left: 1.7vw">热门搜索 </h3>
          <div class="info">
              <p class="p1">1</p>
              <p class="p2">so fresh</p>
          </div>
          <div class="info">
              <p class="p1">2</p>
              <p class="p2">与我无关</p>
          </div>
          <div class="info">
              <p class="p1">3</p>
              <p class="p2">如果爱忘</p>
          </div>
          <div class="info">
              <p class="p3">4</p>
              <p class="p2">放纵就好</p>
          </div>
          <div class="info">
              <p class="p3">5</p>
              <p class="p2">my ears</p>
          </div>

      </div>
      <div class="box1">
          <h3 style="margin-top: 1vw;margin-left: 1.7vw">抖音热搜 </h3>
          <div class="info">
              <p class="p1">1</p>
              <p class="p2">一次就好</p>
          </div>
          <div class="info">
              <p class="p1">2</p>
              <p class="p2">如果可以</p>
          </div>
          <div class="info">
              <p class="p1">3</p>
              <p class="p2">不离不弃</p>
          </div>
          <div class="info">
              <p class="p3">4</p>
              <p class="p2">my baby</p>
          </div>
          <div class="info">
              <p class="p3">5</p>
              <p class="p2">我喜欢你</p>
          </div>

      </div>

  </div>




  <div class="footer">
      <div>
          <a href="index.html">
              <span class="icon iconfont">&#xe818;</span>
              <div class="footer-item">首页</div>
          </a>
      </div>
      <div>
          <a href="broadcast.html">
              <span class="icon iconfont">&#xe8c1;</span>
              <div class="footer-item">直播</div>
          </a>
      </div>
      <div>
          <a href="more.html">
              <span class="icon iconfont">&#xe62e;</span>
              <div class="footer-item">更多</div>
          </a>
      </div>
      <div>
          <a href="community.html">
              <span class="icon iconfont">&#xe627;</span>
              <div class="footer-item">社区</div>
          </a>
      </div>
      <div>
          <a href="my.html">
              <span class="icon iconfont">&#xe819;</span>
              <div class="footer-item">我的</div>
          </a>
      </div>
  </div>

</body>
</html>